﻿<!DOCTYPE html>
<html ng-app="todoApp">
<head>
    <title>TODO List</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="scripts/angular.min.js"></script>
    <script>
        var model = {
            user: "Jerry",
            items: [
                    { "action": "编写方案文档", done: false },
                    { "action": "面试技术人员", done: false },
                    { "action": "向老板汇报", done: true },
                    { "action": "召开部门会议", done: false }]
        };
        var todoApp = angular.module('todoApp', []);

        todoApp.controller("ToDoCtrl", function ($scope) {
            $scope.todo = model;
            $scope.buttonNames = ["Black", "Green", "Blue"];
            $scope.todo.foreColor = "Black"
            $scope.handleEvent = function (e) {
                console.log("Event type: " + e.type);
                var className = (e.type == "mouseover" ? "over" : "leave");
                e.currentTarget.className = className;
            };
        });
    </script>
    <style>
        .over {
            background-color: lightcoral;
        }

        .leave {
            background-color: white;
        }
    </style>

</head>
<body ng-controller="ToDoCtrl">
    <div class="container">
        <div class="page-header">
            <h1>
                {{todo.user}}的待办事务列表
            </h1>
        </div>
        <div class="well">
            <span>文字颜色：</span>
            <span ng-repeat="button in buttonNames">
                <button class="btn btn-info" ng-click="todo.foreColor = button">
                    {{button}}
                </button>
            </span>
        </div>
        <div>
            <table class="table">
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>描述</th>
                        <th>已完成</th>
                    </tr>
                </thead>
                <tr ng-repeat="item in todo.items" 
                    ng-style="{color:todo.foreColor}"
                    ng-mouseenter="handleEvent($event)"
                    ng-mouseleave="handleEvent($event)">
                    <td>{{$index + 1}}</td>
                    <td>{{item.action}}</td>
                    <td><input type="checkbox" ng-model="item.done" /> </td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>
